<script setup>
// 项目入口组件
import { onMounted, onBeforeUnmount } from 'vue'
import { useUserStore } from '@/stores/user'
import { authAPI } from '@/utils/api'
import { refreshAllData } from '@/utils/formData' // 导入表单数据服务
import { useRouter, useRoute } from 'vue-router'

const userStore = useUserStore()
let tokenRefreshInterval = null

// 刷新token函数
const refreshToken = async () => {
  if (!userStore.isLoggedIn) return
  
  try {
    // 静默刷新token，不再打印刷新日志
    const res = await authAPI.refreshToken()
    if (res.success && res.data.accessToken) {
      userStore.setToken(res.data.accessToken, false) // 传入false参数表示不打印日志
    }
  } catch (error) {
    // 只在控制台记录错误，不再向用户显示
    if (error.response && error.response.status === 401) {
      // 如果是401错误，清除登录状态并跳转登录页
      userStore.logout()
      if (window.location.pathname !== '/login') {
        window.location.href = '/login'
      }
    }
  }
}

// 预加载表单数据
const preloadFormData = async () => {
  if (!userStore.isLoggedIn) return
  
  try {
    console.log('开始预加载表单数据...')
    await refreshAllData()
    console.log('表单数据预加载完成')
  } catch (error) {
    console.error('表单数据预加载失败:', error)
  }
}

// 初始化认证状态
const initializeAuth = async () => {
  const localStorageToken = localStorage.getItem('token')
  
  // 如果localStorage中有token，但store中没有，说明可能是新的会话但用户之前已登录
  if (localStorageToken && !userStore.token) {
    userStore.setToken(localStorageToken, false) // 不打印日志
    
    try {
      // 同步获取用户信息，确保在其他操作之前完成
      await userStore.fetchUserInfo()
      console.log('用户认证状态已恢复')
      
      // 认证成功后，设置定时刷新和预加载数据
      setupPeriodicRefresh()
      await preloadFormData()
    } catch (error) {
      console.log('Token无效，清除认证状态')
      // 如果token无效，清除localStorage中的token
      localStorage.removeItem('token')
      userStore.setToken('', false) // 不打印日志
    }
  } 
  // 如果store中有token，但localStorage中没有，同步到localStorage
  else if (userStore.token && !localStorageToken) {
    localStorage.setItem('token', userStore.token)
    setupPeriodicRefresh()
    await preloadFormData()
  }
  // 如果两者都有但不一致，以store中的为准
  else if (localStorageToken && userStore.token && localStorageToken !== userStore.token) {
    localStorage.setItem('token', userStore.token)
    setupPeriodicRefresh()
    await preloadFormData()
  }
  // 如果两者都有且一致，说明用户已经登录，设置定时刷新
  else if (userStore.isLoggedIn && userStore.userInfo && Object.keys(userStore.userInfo).length > 0) {
    setupPeriodicRefresh()
    await preloadFormData()
  }
}

// 设置定期刷新
const setupPeriodicRefresh = () => {
  if (userStore.isLoggedIn && !tokenRefreshInterval) {
  // 设置token定期刷新（每25分钟刷新一次，假设token有30分钟有效期）
    tokenRefreshInterval = setInterval(refreshToken, 25 * 60 * 1000)
  }
}

onMounted(async () => {
  console.log('App mounted - 开始初始化认证状态')
  
  // 同步初始化认证状态，避免异步问题
  await initializeAuth()
  
  // 监听路由变化，在用户登录后预加载表单数据
  const handleLogin = async () => {
    // 延迟执行，确保登录流程完全完成
    setTimeout(async () => {
    if (userStore.isLoggedIn) {
        setupPeriodicRefresh()
        try {
          await preloadFormData()
        } catch (error) {
          // 静默处理错误，不显示错误消息
          console.log('预加载表单数据失败，将在后续使用时重试:', error.message)
        }
      }
    }, 1000) // 延迟1秒执行
  }
  
  // 添加用户登录事件监听
  window.addEventListener('user-login', handleLogin)
  
  // 组件销毁前移除事件监听
  onBeforeUnmount(() => {
    window.removeEventListener('user-login', handleLogin)
  })
  
  console.log('App初始化完成')
})

// 组件销毁前清除定时器
onBeforeUnmount(() => {
  if (tokenRefreshInterval) {
    clearInterval(tokenRefreshInterval)
    tokenRefreshInterval = null
  }
})
</script>

<template>
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<style>
/* 全局样式可以在此定义 */
body {
  margin: 0;
  padding: 0;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 滑动过渡效果 */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

/* 页面过渡效果 */
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from {
  opacity: 0;
  transform: translateX(20px);
}
.page-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}
</style>
